<template>
<div>
  <!--获取更多粉丝卡-->
  <!--投票成功-->
  <div v-if="!dkie2" box="center" tadeSize="36" text="center"><img img='toupcg' src="../../../static/images/toupcg.png" />成功为她投了{{fansNumber}}票！
  </div>
  <!--自己加票-->
  <div v-if="!dkie1" tadeSize="28" color="pink" bg="grey" style="padding: 10px 15px;">
    购买以下护理项目或套餐，给自己增添魅力，同时还能额外为自己加票哦~
  </div>
  <!--粉丝卡介绍-->
  <div v-if="dkie2&&dkie1" class="container" tadeSize="28" color="grey3">
    粉丝卡是投票的凭证，一张粉丝卡可以投一次票 获取更多的粉丝卡，助你亲爱的她登上丽人榜首吧~
  </div>
  <!--丽人排名票数信息-->
  <div v-if="!dkie2" box="center">
    <img class="product" box="left" radius='10' :src="ranking1.img" />
    <div marginleft="4" box="left">
      <div tadeSize="34" color="pink"><a box="inb">{{ranking1.name}}</a><a marginleft="30" box="inb">当前第{{ranking.rank}}名</a></div>
      <div tadeSize="26" color="grey6"><a box="inb">票数:{{ranking1.vote_num}}</a><a marginleft="30" box="inb">距离上一名:{{ranking.pre_vote_num}}票</a></div>
    </div>
  </div>
  <!--加票提示-->
  <div v-if="dkie1" style="height: 1.6rem;line-height: 1.6rem;" text="tin" bg="grey" tadeSize="26" color="pink">
    通过购买以下项目可以获得更多的投票机会哦~
  </div>
  <!--产品购买-->
  <ul class="spgmai">
    <li v-for="(tiem,i) in pont">
      <div box="center">
        <img class="prodimg" radius="10" box="left"  :src="tiem.img" />
        <div position="rela" ref="show" style="width: 58%;height: 4.906rem;" box="left" marginleft='4'>
          <p style="margin-top:3px;" tadeSize="30" color="grey3" ovfl="hide"><i>{{tiem.title}}</i><i style="display: block;">{{tiem.price}}元</i></p>
          <p style="margin:3px 0;" tadeSize="26" color="grey6">
            {{tiem.introduce}}
          </p>
          <p tadeSize="26" color="grey9">{{tiem.remark}}</p>
          <em  @click="shoW($event.target,$refs.show,i)" position="abso" color="pink" bg="white" tadeSize="12" style="bottom: -2px;right: 5px;padding:0 5px;">< 展开 ></em>
        </div>
      </div>
      <button @click="goumtz(tiem.object_id,tiem.goods_type,tiem)" radius="10" bg="pink" tadeSize="30" color="white" class="button" box="center" type="button">立即购买</button>
    </li>
  </ul>
  <!--以下是友情链接部分-->
  <div box="center" text="center" style=""><img style="width:12px;height:22px" src="../../../static/images/xiaxjt.png" /></div>
  <p box="center" text="center"><img style="width:105px;height:105px" src="../../../static/images/logo.png" /></p>
  <p box="center" tadeSize="26" color="grey3">
    I美是面向中国消费者美容行业的移动互联平台，在I美可以 预约到美容店体验服务；顾客选择相应的美容店、美容师和 项目后，确定时间和地点即可享受服务。
  </p>
  <p box="center" style="margin-bottom: 0px;" text="center"><img style="width:105px;height:105px" src="../../../static/images/erwma.png" /></p>
  <p box="center" style="margin-top: 0px;" text="center" tadeSize="26" color="grey6">长按识别<br>关注I美平台微信公众号</p>
  <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.zhangdong.imei" style="width: 50%;" radius="10" bg="pink" tadeSize="30" color="white" class="button" text="center" box="center" type="button">下载I美APP</a>
</div>
</template>
<script>
import {
  getMerchandise,
  getURL,
  playerAdd
} from '../../api/buy'
import {
  getDisVotes,
  getBeautyMsg
} from '../../api/index'
export default {
  data() {
    return {
      // 判断进来时的状态布尔值
      dkie1: true,
      dkie2: true,
      //商品数据
      pont: [],
      // 为丽人加多少票
      fansNumber: 0,
      //丽人信息
      ranking: '',
      ranking1: ''
    }
  },
  methods: {
    shoW(e,b,i){
        if(e.innerText=='< 展开 >'){
          e.innerText='> 回溯 <'
          b[i].style.height='auto';
        }else{
          e.innerText='< 展开 >'
          b[i].style.height='4.906rem';
        }
    },
    /*头部判断选择块*/
    tihkel(el) {
      if (el == '0') { /*为自己加票*/
        this.dkie1 = false;
        this.dkie2 = true;
      } else if (el == '1') { /*路人投票*/
        this.dkie1 = true;
        this.dkie2 = false;
        this._playerAdd();
      } else if (el == '2') { /*介绍粉丝卡*/
        this.dkie1 = true;
        this.dkie2 = true;
      }
    },
    goumtz(id, goods_type, sonp) { /*立刻购买*/
      var obj = sonp;
      //存入sessionStorage
      sessionStorage.obj = JSON.stringify(obj);
      window.location.href = getURL() + '/meal_pay.html?code=vote20170528&id=' + id + '&token=' + localStorage.getItem('token');
      //          window.location.href='http://localhost:8080/#/buySuccess';
    },
    getMerchandise() { /*商品*/
      this.$http.get(getMerchandise(localStorage.getItem('token'))).then(res => { /*localStorage.getItem('token')获取登陆状态*/
        //            console.log(res.data.data);
        this.pont = res.data.data;
      });
    },
    _playerAdd() { /*路人投票数据*/
      var token = window.localStorage.getItem('token');
      var liren_id = window.sessionStorage.getItem('liren_id');
      var fansNumber = window.sessionStorage.getItem('fansNumber');
      this.$http.get(playerAdd(token, liren_id)).then(res => {
        this.fansNumber = res.data.data.success_cards;
      })
    },
    getDisVotes() { /*丽人信息输出名次，距离票数*/
      this.$http.get(getDisVotes(localStorage.getItem('token'), sessionStorage.liren_id)).then(res => {
        //              console.log(res.data.data);
        this.ranking = res.data.data;
      });
    },
    getBeautyMsg() { /*丽人信息输出头像，拥有票数*/
      this.$http.get(getBeautyMsg(sessionStorage.liren_id)).then(res => {
        this.ranking1 = res.data.data;
      });
    }
  },
  created() {
    this.tihkel(this.$route.query.liren);
    this.getMerchandise();
    this.getDisVotes();
    this.getBeautyMsg();
  },
  mounted() {

  }
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
.container {
    padding: 15px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    margin-top: 15px;
    margin-bottom: 15px;
}

[marginleft='30'] {
    margin-left: 30px;
}

.spgmai li {
    border-top: 10px solid #f5f5f5;
}
.spgmai li:first-child {
    border-top: none;
}

.product {
    width: 3.626rem;
    height: 3.626rem;
}

.rwName a {
    min-width: 4.16rem;
}

.prodimg {
    width: 37.681%;
    height: 4.906rem;
}

.button {
    height: 1.706rem;
    line-height: 1.706rem;
}

.uesl {
    display: none;
}
</style>
